<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" href="/static/admin/css/login.css">


    <!-- 作者QQ:951252660 -->
</head>

<body>
<div class="login">
    <div class="center">、

        <h1>Register</h1>
        <div class="inputLi">
            <strong>账户</strong>
            <input type="text" placeholder="请输入" name="username">
        </div>
        <div class="inputLi">
            <strong>提示</strong>
            <span class="error"></span>
        </div>
        <div class="inputLi">
            <strong>密码</strong>
            <input type="password" placeholder="请输入" name="password">
        </div>
        <div class="inputLi">
            <strong>提示</strong>
            <span class="error"></span>
        </div>
        <div class="inputLi">
            <strong>验证码</strong>
            <input type="text" placeholder="请输入验证码" name="captcha">
            <!--                点击切换验证码、怎么实现？-->
            <img src="{:captcha_src()}" onclick="this.src='{:captcha_src()}' + '?' + Math.random()"  alt="captcha" />
        </div>
        <div class="inputLi">
            <button class="login-btn">注册</button>
        </div>
       <p>已有帐号去 <a href="/admin/login">登录</a></p>
        <p class="tip">关注17素材网</p>
    </div>
</div>
</body>
<script src="/static/admin/js/jquery-1.8.1.min.js"></script>
<script>

    $("[name='username']").blur(function () {
        var username = $(this).val();
        var preg = /^\w{2,}$/;
        // jquery验证正则的格式
        // 正则.test(字符串)
        if (!preg.test(username)) {
            // 不通过验证给出提示
            // html() 解析html代码
            // text() 纯文本
            $('.error:eq(0)').html("<font color='red'>用户名长度至少是2位</font>");
            return false;
        } else{
            // 通过验证、去掉提示
            $('.error:eq(0)').html("<font color='blue'>ok</font>");
        }
    });
    $("[name='password']").blur(function () {
        var username = $(this).val();
        var preg = /^\w{6,}$/;
        // jquery验证正则的格式
        // 正则.test(字符串)
        if (!preg.test(username)) {
            // html() 解析html代码
            // text() 纯文本
            $('.error:eq(1)').html("<font color='red'>用户名长度至少是6位</font>");
            return false;
        } else{
            // 通过验证、去掉提示
            $('.error:eq(1)').html("<font color='blue'>ok</font>");
        }
    });

    // ajax登录
    $('.login-btn').click(function () {
        // 获取input表单的值
        var username = $("[name='username']").val();// 通过属性获取input框的值
        var password = $("[name='password']").val();// 获取密码框的值
        var captcha = $("[name='captcha']").val();// 获取密码框的值
        // 非空验证
        if (username === '') {
            alert("帐号不能为空");return false;
        }
        if (password.length == 0) {
            alert('密码不能为空');return  false;
        }
        // alert(11);//测试点击事件是否绑定成功
        $.ajax({
            url:'/admin/doLogin',//请求的url
            data:{username:username,password:password,captcha:captcha},//请求的数据
            dataType:'json',//响应的数据格式
            type:'post',//请求方式
            success:function (response) {
                console.log(response);//接口响应的数据
                alert(response.msg);
                if (response.code == 200) {
                    location.href = '/admin/index';//跳转到首页
                }
            }
        });
    })


</script>

</html>